<!--
 * @Author: pubilan 1570576141@qq.com
 * @Date: 2024-12-27 16:23:28
 * @LastEditors: pubilan 1570576141@qq.com
 * @LastEditTime: 2025-01-03 17:19:37
 * @FilePath: \gz_gw\src\visual\Overview\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <baseMap />
    <div class="left-box">
      <!-- 管道统计 -->
      <pipe />
      <!-- 站场统计 -->
      <station />
      <!-- 高后果区统计 -->
      <gaoHouGuo />
      <!-- 视频安防 -->
       <videoSecurity />
    </div>
    <div class="right-box">
      <!-- 下游用户输气完成情况 -->
      <userCompletion />
      <!-- 折线统计图 -->
      <lineStatistics />
      <!-- 饼图 -->
      <pieStatistics />
      <report />
    </div>
  </div>
</template>

<script>
import baseMap from '../map'
import pipe from './pipe.vue'
import station from './station.vue'
import gaoHouGuo from './gaoHouGuo.vue'
import videoSecurity from './videoSecurity.vue'
import userCompletion from './userCompletion.vue'
import report from './report.vue'
import lineStatistics from './lineStatistics.vue'
import pieStatistics from './pieStatistics.vue'

export default {
  components: {baseMap,pipe,station,gaoHouGuo,videoSecurity,userCompletion,report,lineStatistics,pieStatistics},
}
</script>

<style lang="scss" scoped>
::v-deep.left-box,::v-deep.right-box {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 22.4vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .item-title {
    width: 100%;
    height: 4.62vh;
    background: url('~@/assets/images/title_bg.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 0px 0px 0px 0px;
    line-height: 4.62vh;
    position: relative;
    span:first-of-type {
      display: inline-block;
      font-size: 20px;
      text-indent: 16px;
      text-shadow: 0px 0px 9px #158EFF;
      color: #fff;
      font-weight: bold;
    }
    span:last-of-type {
      color: #215A8E;
      opacity: 0.3;
      font-size: 12px;
      float: right;
      margin-right: 29%;
    }
  }
  .text-yellow {
    color: #FFD15C;
  }
  .text-yellow2 {
    color: #FFF78A ;
  }
  .text-red {
    color: #FF452D;
  }
  .text-green {
    color: #51B083;
  }
  .text-green2 {
    color: #2CC970;
  }
  .text-blue {
    color: #2993FB;
  }
  .text-blue2 {
    color: #00A9FF;
  }
  .text-blue3 {
    color: #1EF0FF ;
  }
  .text-blue4 {
    color: #07D2FA  ;
  }
  .text-grey {
    color: #B4C0CC;
  }
  .text-grey2 {
    color: #CBDEED;
  }
  .text-white {
    color: #fff;
  }
  .content-box {
    padding: 10px;
    background: linear-gradient( 180deg, rgba(2, 68, 102, 0.3) 0%, rgba(2, 60, 89, 0.3) 0%, rgba(1, 18, 27, 0.3) 100%);
    border-radius: 0px 0px 0px 0px;
    border: 2px solid rgba(31,198,255,0.15);
    font-size: 14px;
  }
}
::v-deep .left-box {
  left: 26px;
  .container {
    height: 18.5vh;
  }
  .content-box {
    height: 13.8vh;
    border-top: none;
    display: flex;
    width: 100%;
    .left,.right {
      width: 50%;
    }
    .left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      height: 100%;
      .top {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
        }
        p {
          width: 100%;
          margin-left: 20px;
          span:first-of-type {
            font-size: 22px;
          }
          span:last-of-type {
            font-size: 16px;
            margin-left: 5px;
          }
        }
      }
      >div {
        font-size: 15px;
        line-height: 24px;
        margin-top: 5px;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .item {
        padding: 0 10px;
        height: 30%;
        display: flex;
        align-items: center;
        font-size: 12px;
        background-size: 100% 100% !important;
        &.item-green {
          background: linear-gradient( 270deg, rgba(4, 53, 99, 0.3) 0%, rgba(4,53,99,0.09) 100%),url('~@/assets/images/pipe_bg_green.png') no-repeat;
        }
        &.item-blue {
          background: linear-gradient( 270deg, rgba(4, 53, 99, 0.3) 0%, rgba(4,53,99,0.09) 100%),url('~@/assets/images/pipe_bg_blue.png') no-repeat;
        }
        &.item-yellow {
          background: linear-gradient( 270deg, rgba(4, 53, 99, 0.3) 0%, rgba(4,53,99,0.09) 100%),url('~@/assets/images/pipe_bg_yellow.png') no-repeat;
        }
        &.item-red {
          background: linear-gradient( 270deg, rgba(4, 53, 99, 0.3) 0%, rgba(4,53,99,0.09) 100%),url('~@/assets/images/pipe_bg_red.png') no-repeat;
        }
      }
    }
  }
}
::v-deep.right-box {
  right: 26px;
}
</style>